<template>
  <div class="flexX">
    <div class="mainContent">
      <div class="flexX">
        <el-input
            v-model="searchValue"
            placeholder="书籍名称、书籍ISBN"
            style="width: 900px;height: 40px;margin-top: 50px"
        >
          <template #append>
            <el-button icon="Search" type="primary" @click="searchHandle">搜索</el-button>
          </template>
        </el-input>
      </div>
      <el-divider />
      <div class="flexX">
        <div class="navbar">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="全部书籍" name="first">
              <AllBook
                  type="all"/>
            </el-tab-pane>
            <el-tab-pane label="计算机类书籍" name="second">
              <AllBook
                  type="computer"/>
            </el-tab-pane>
            <el-tab-pane label="文学、小说类书籍" name="third">
              <AllBook
                  type="novel"/>
            </el-tab-pane>
            <el-tab-pane label="搜索" name="search" v-if="search">
              <AllBook
                  type="search"
                  :keyword="searchValue"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref , onMounted} from 'vue';
import store from "@/store";
import router from "@/router";
import AllBook from "@/components/AllBook";
import {ElMessage} from "element-plus";

const search = ref(false)
const searchValue = ref('')
const activeName = ref('first')
const searchHandle = () => {
  if (searchValue.value === '') {
    ElMessage({
      message: ('请输入搜索内容')
    })
  } else {
    search.value = true;
    activeName.value = 'search'
  }

}
</script>

<style scoped>
.navbar{
  width: 900px;
}
.mainContent{
  width: var(--content);
  height: auto;
  background-color: white;
}
</style>